<template>
  <div class="approval-detail">
    <div class="form-container">
      <div class="approval-process">
        <div v-for="(step, index) in approvalSteps" :key="step.id">
          <div class="approval-step">
            <div class="step-left">
              <div class="step-icon">
                <van-icon
                  :name="getStepIcon(step.type)"
                  :class="['step-icon-inner', step.type]"
                />
              </div>
              <div
                class="step-line"
                v-if="index !== approvalSteps.length - 1"
              ></div>
            </div>
            <div class="step-content">
              <div class="step-info">
                <span class="step-name">{{ step.name }}</span>
                <span class="step-desc">{{ step.desc }}</span>
                <div
                  v-if="step.conditions && step.conditions.length"
                  class="condition-tabs"
                >
                  <div
                    v-for="condition in step.conditions"
                    :key="condition.id"
                    :class="[
                      'condition-tab',
                      { active: isActiveCondition(step, condition) },
                    ]"
                    @click="switchCondition(step, condition)"
                  >
                    <span class="condition-name">{{ condition.name }}</span>
                    <span class="condition-desc">{{ condition.desc }}</span>
                  </div>
                </div>
              </div>
              <div class="step-right">
                <div
                  v-if="step.selfSelect"
                  class="approver-selector"
                  @click="selectApprover(step)"
                >
                  <span v-if="!getApproverCount(step.id)" class="select-tip"
                    >请选择</span
                  >
                  <div v-else class="approver-list">
                    <div
                      v-for="(approver, idx) in getApprovers(step.id)"
                      :key="idx"
                      class="approver-item"
                    >
                      <image
                        :src="approver.avatar"
                        class="approver-avatar"
                        mode="aspectFill"
                      />
                      <span class="approver-name">{{ approver.name }}</span>
                    </div>
                  </div>
                </div>
                <div
                  v-else-if="step.approvers && step.approvers.length"
                  class="approver-list"
                >
                  <div
                    v-for="(approver, idx) in step.approvers"
                    :key="idx"
                    class="approver-item"
                  >
                    <image
                      :src="approver.avatar"
                      class="approver-avatar"
                      mode="aspectFill"
                    />
                    <span class="approver-name">{{ approver.name }}</span>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { parseApprovalNode, getBranchSteps } from "@/utils/approval";
import { Toast } from "vant";

export default {
  name: "flowPrediction",
  data() {
    return {
      approvalSteps: [],
      selectedApprovers: {},
      ready: false,
      conditionFlows: {},
    };
  },
  created(options) {
    // if (options.type) {
    // this.type = options.type;
    this.initPage();
    // }
    console.log("不加载!!!!");
  },
  props: {
    node: {
      type: Object,
      default: {},
    },
  },
  methods: {
    initPage() {
      // const approvalJson = {
      //   id: "root",
      //   name: "发起人",
      //   type: 0,
      //   status: -1,
      //   childNode: {
      //     id: "node_166218234331",
      //     name: "审批人",
      //     type: 1,
      //     status: -1,
      //     content: "admin",
      //     config: {
      //       assignedType: "ASSIGN_USER",
      //       approvalMode: "NEXT",
      //       nobody: {
      //         handler: "AUTO",
      //         assignedUser: [],
      //       },
      //       reject: {
      //         type: "TO_END",
      //         target: "",
      //       },
      //       leader: {
      //         level: 1,
      //       },
      //       role: [],
      //       assignedUser: [
      //         {
      //           id: "1",
      //           username: "admin",
      //           password:
      //             "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //           avatar: "https://picsum.photos/200/200?random=1",
      //           introduction: null,
      //           roles: null,
      //           salt: "abcd",
      //           status: "正常",
      //           realName: "管理员",
      //           email: "admin@example.com",
      //           sex: "男",
      //           phone: "13900000001",
      //           deptId: "1",
      //           enable: "是",
      //           login: "否",
      //           createTime: "2025-06-06 17:55:46",
      //           createBy: "system",
      //           updateTime: "2025-06-06 17:55:46",
      //           updateBy: "system",
      //           remark: "系统管理员",
      //           lastTime: "2025-06-06 17:55:46",
      //         },
      //       ],
      //       selfSelect: {
      //         multiple: true,
      //       },
      //       levelMode: 1,
      //       approverIds: [],
      //       approverNames: [],
      //       formPerms: [
      //         {
      //           id: "field25wrinc2kv7k",
      //           name: "单行输入框",
      //           required: true,
      //           perm: "R",
      //         },
      //       ],
      //       configure: {},
      //       addable: true,
      //       deletable: false,
      //       error: false,
      //     },
      //     childNode: {
      //       id: "node_167637822943",
      //       name: "条件分支",
      //       type: 4,
      //       status: -1,
      //       childNode: {
      //         id: "node_167890739332",
      //         name: "抄送人",
      //         type: 2,
      //         status: -1,
      //         childNode: null,
      //         content: "admin,chengjing",
      //         config: {
      //           approverGroups: [
      //             {
      //               id: "node_167890732582",
      //               approverType: 1,
      //               levelMode: 1,
      //               approverIds: [],
      //               approverNames: [],
      //             },
      //           ],
      //           formPerms: [
      //             {
      //               id: "field25wrinc2kv7k",
      //               name: "单行输入框",
      //               required: true,
      //               perm: "R",
      //             },
      //           ],
      //           configure: {},
      //           addable: true,
      //           deletable: false,
      //           error: false,
      //           assignedUser: [
      //             {
      //               id: "1",
      //               username: "admin",
      //               password:
      //                 "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //               avatar: "https://picsum.photos/200/200?random=1",
      //               introduction: null,
      //               roles: null,
      //               salt: "abcd",
      //               status: "正常",
      //               realName: "管理员",
      //               email: "admin@example.com",
      //               sex: "男",
      //               phone: "13900000001",
      //               deptId: "1",
      //               enable: "是",
      //               login: "否",
      //               createTime: "2025-06-06 17:55:46",
      //               createBy: "system",
      //               updateTime: "2025-06-06 17:55:46",
      //               updateBy: "system",
      //               remark: "系统管理员",
      //               lastTime: "2025-06-06 17:55:46",
      //             },
      //             {
      //               id: "19",
      //               username: "chengjing",
      //               password: "pass378",
      //               avatar: "https://picsum.photos/200/200?random=19",
      //               introduction: null,
      //               roles: null,
      //               salt: "uvwx",
      //               status: "正常",
      //               realName: "程静",
      //               email: "chengjing@example.com",
      //               sex: "女",
      //               phone: "13900000019",
      //               deptId: "1",
      //               enable: "是",
      //               login: "否",
      //               createTime: "2025-06-06 17:55:46",
      //               createBy: "zhangsan",
      //               updateTime: "2025-06-06 17:55:46",
      //               updateBy: "zhangsan",
      //               remark: "技术部助理",
      //               lastTime: "2025-06-06 17:55:46",
      //             },
      //           ],
      //         },
      //         pid: "node_167637822943",
      //         error: false,
      //       },
      //       addable: true,
      //       branchs: [
      //         {
      //           id: "node_167637823692",
      //           pid: "node_167637822943",
      //           name: "分支1",
      //           type: 3,
      //           status: -1,
      //           childNode: {
      //             id: "node_167779946366",
      //             name: "审批人",
      //             type: 1,
      //             status: -1,
      //             content: "admin",
      //             config: {
      //               assignedType: "ASSIGN_USER",
      //               approvalMode: "NEXT",
      //               nobody: {
      //                 handler: "AUTO",
      //                 assignedUser: [],
      //               },
      //               reject: {
      //                 type: "TO_END",
      //                 target: "",
      //               },
      //               leader: {
      //                 level: 1,
      //               },
      //               role: [],
      //               assignedUser: [
      //                 {
      //                   id: "1",
      //                   username: "admin",
      //                   password:
      //                     "$2a$10$CUBnI5EVYshy2RwMGxah8u7vMTlvcptIgywYKA1hMY2svurEFiHge",
      //                   avatar: "https://picsum.photos/200/200?random=1",
      //                   introduction: null,
      //                   roles: null,
      //                   salt: "abcd",
      //                   status: "正常",
      //                   realName: "管理员",
      //                   email: "admin@example.com",
      //                   sex: "男",
      //                   phone: "13900000001",
      //                   deptId: "1",
      //                   enable: "是",
      //                   login: "否",
      //                   createTime: "2025-06-06 17:55:46",
      //                   createBy: "system",
      //                   updateTime: "2025-06-06 17:55:46",
      //                   updateBy: "system",
      //                   remark: "系统管理员",
      //                   lastTime: "2025-06-06 17:55:46",
      //                 },
      //               ],
      //               selfSelect: {
      //                 multiple: true,
      //               },
      //               levelMode: 1,
      //               approverIds: [],
      //               approverNames: [],
      //               formPerms: [
      //                 {
      //                   id: "field25wrinc2kv7k",
      //                   name: "单行输入框",
      //                   required: true,
      //                   perm: "R",
      //                 },
      //               ],
      //               configure: {},
      //               addable: true,
      //               deletable: false,
      //               error: false,
      //             },
      //             childNode: null,
      //             pid: "node_167637823692",
      //             error: false,
      //           },
      //           config: {
      //             branchType: 2,
      //             expression: "${a>b}",
      //             priorityLevel: 1,
      //             showPriorityLevel: true,
      //             conditionGroup: [],
      //             addable: true,
      //             deletable: false,
      //             error: false,
      //           },
      //           content: "公式:[${a>b}]",
      //           error: false,
      //         },
      //         {
      //           id: "node_167637821574",
      //           pid: "node_167637822943",
      //           name: "其他情况",
      //           type: 3,
      //           status: -1,
      //           config: {
      //             conditionGroup: [],
      //             branchType: 1,
      //             expression: "",
      //             priorityLevel: 2,
      //             showPriorityLevel: true,
      //             childNode: null,
      //             addable: true,
      //             deletable: false,
      //             error: false,
      //             content: "其他情况进入此流程",
      //           },
      //         },
      //       ],
      //       pid: "node_166218234331",
      //     },
      //     pid: "root",
      //     error: false,
      //   },
      //   config: {
      //     formPerms: [
      //       {
      //         id: "field25wrinc2kv7k",
      //         name: "单行输入框",
      //         required: true,
      //         perm: "E",
      //       },
      //     ],
      //     configure: {},
      //     content: "",
      //     addable: true,
      //     error: false,
      //   },
      //   content: "已设置",
      // };
      this.approvalSteps = parseApprovalNode(this.node);

      console.log("approvalSteps", this.approvalSteps);

      this.ready = true;
    },
    getStepIcon(type) {
      const icons = {
        start: "contact",
        approve: "manager",
        copy: "friends",
        end: "checked",
      };
      return icons[type] || "contact";
    },
    getApproverCount(stepId) {
      return this.selectedApprovers[stepId]
        ? this.selectedApprovers[stepId].length
        : 0;
    },
    isActiveCondition(step, condition) {
      return (
        step.currentBranch === condition.id ||
        this.currentCondition === condition.id
      );
    },
    switchCondition(step, condition) {
      if (this.isActiveCondition(step, condition)) return;

      this.currentCondition = condition.id;
      console.log("currentCondition", this.currentCondition);
      step.currentBranch = condition.id;

      if (!this.conditionFlows[condition.id]) {
        const result = getBranchSteps(condition);
        console.log("result", result);
        this.$set(this.conditionFlows, condition.id, result);
      }

      const currentIndex = this.approvalSteps.findIndex(
        (s) => s.id === step.id
      );
      console.log("currentIndex", currentIndex);

      const nextSteps = this.conditionFlows[condition.id] || [];

      console.log("nextSteps", JSON.stringify(nextSteps));
      // 移除当前节点后的所有节点（包括结束节点）
      this.approvalSteps.splice(currentIndex + 1);
      // 添加新的分支节点
      if (nextSteps.length > 0) {
        this.approvalSteps.push(...nextSteps);
      } else {
        // // 添加结束节点
        this.approvalSteps.push({
          id: "end",
          name: "流程结束",
          type: "end",
          desc: "",
          approvers: [],
        });
      }
    },
    selectApprover(step) {
      // const selectedIds = this.selectedApprovers[step.id].map(item => item.id) || [];
      Toast("选择人员...");
      console.log("选择人员...");
    },
  },
};
</script>
<style scoped>
.van-nav-bar {
  border-bottom: 0;
}

.van-hairline--bottom::after {
  border-bottom: 0;
}
</style>

<style scoped>
.approval-detail {
  /* padding-top: calc(44px + var(--20px, 20px)); */
  min-height: 100vh;
  background: var(--f5f5f5);
}

.approval-detail .van-nav-bar {
  background: var(--ffffff);
  padding-top: var(--20px, 20px);
  height: calc(44px + var(--20px, 20px));
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .van-nav-bar .van-nav-bar__content {
  height: 44px;
}

.approval-detail .van-nav-bar .van-nav-bar__title {
  height: 44px;
  line-height: 44px;
}

.approval-detail .form-container {
  padding: 14px 14px calc(env(safe-area-inset-bottom) + 120px);
  /* margin-top: 40px; */
}

.approval-detail .submit-btn {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 20px 40px calc(20px + env(safe-area-inset-bottom));
  background: var(--ffffff);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  z-index: 100;
}

.approval-detail .approval-process {
  padding: 30px;
  background: #fff;
  border-radius: 12px;
  /* margin: 0 20px; */
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.03);
}

.approval-detail .approval-process .approval-step {
  display: flex;
  position: relative;
  margin-bottom: 48px;
}

.approval-detail .approval-process .approval-step .step-left {
  position: relative;
  width: 14px;
  margin-right: 24px;
}

.approval-detail .approval-process .approval-step .step-left .step-icon {
  width: 24px;
  height: 24px;
  background: #f5f6f7;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1;
  position: relative;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.approval-detail .approval-process .approval-step .step-left .step-line {
  position: absolute;
  left: 11px;
  top: 24px;
  bottom: -48px;
  width: 2px;
  background: #ebedf0;
}

.approval-detail .approval-process .approval-step .step-content {
  flex: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  padding-top: 4px;
}

.approval-detail .approval-process .approval-step .step-content .step-info {
  flex: 1;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 8px;
  font-weight: 500;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .step-desc {
  font-size: 12px;
  color: #969799;
  line-height: 1.4;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .approver-selector {
  padding: 8px 16px;
  background: #f7f8fa;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs {
  margin-top: 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active {
  background: #e8f3ff;
  border-color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab {
  padding: 12px 20px;
  background: #f7f8fa;
  border-radius: 24px;
  border: 1px solid #ebedf0;
  display: flex;
  flex-direction: column;
  cursor: pointer;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-name {
  font-size: 12px;
  color: #323233;
  margin-bottom: 4px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab.active
  .condition-name {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-info
  .condition-tabs
  .condition-tab
  .condition-desc {
  font-size: 11px;
  color: #969799;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item:last-child {
  margin-bottom: 0;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  background: #f7f8fa;
  padding: 8px 16px;
  border-radius: 24px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #fff;
  border: 1px solid #ebedf0;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-name {
  font-size: 12px;
  color: #323233;
  font-weight: 400;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.start {
  color: #1989fa;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner {
  font-size: 14px;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.approve {
  color: #07c160;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.condition {
  color: #ee0a24;
}

.approval-detail
  .approval-process
  .approval-step
  .step-left
  .step-icon
  .step-icon-inner.end {
  color: #969799;
}

.approval-detail
  .approval-process
  .approval-step
  .step-content
  .step-right
  .approver-list
  .approver-item
  .approver-avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  margin-right: 8px;
  background-color: #fff;
  border: 1px solid #ebedf0;
}
</style>